<template>
    <section>

        <!--工具条-->
		<el-col :span="24" class="toolbar">
			<el-form :inline="true">
				<el-form-item>
					<el-input v-model="searchKey" placeholder="搜索关键字" prefix-icon="el-icon-search"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
        <el-col :span="24">
        <el-table  :data="tableData" border v-loading="listLoading" >
          <el-table-column label="编号" prop="id" sortable  width="80" align="center">
          </el-table-column> 
          <el-table-column label="应用名称" prop="serviceName" width="320" sortable></el-table-column>
          <el-table-column label="应用IP" prop="serviceIp" width="180" sortable></el-table-column>
          <el-table-column label="类型" align="center"> 
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type==='prod'" type="success">
                    生产
                </el-tag>
                <el-tag v-else-if="scope.row.type==='test'" type="warning">
                    测试
                </el-tag>
                <el-tag v-else type="danger">
                    准生产
                </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
          <el-table-column label="更新时间" prop="updateTime" align="center"></el-table-column>
          <el-table-column label="操作" width="185" align="center">
				<template slot-scope="delScope">
                    <el-tooltip content="编辑" placement="top-end">
					    <el-button type="primary"  size="small" icon="el-icon-edit" @click="handleEdit(delScope.$index, delScope.row)" ></el-button>
					</el-tooltip>
                    <el-tooltip content="删除" placement="top-end">
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDel(delScope.$index, delScope.row)"></el-button>
				    </el-tooltip>
                    <el-tooltip content="详情" placement="top-end">
                        <el-button type="success" icon="el-icon-info" size="small" @click="handleInfo(delScope.row)"></el-button>
                    </el-tooltip>
                </template>
			</el-table-column>
        </el-table>
        </el-col>

        <!--工具条-->
		<el-col :span="24" style="padding-top:20px">
            <el-pagination  background layout="total,prev, pager, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
		</el-col>
        <!--编辑界面-->
		<el-dialog title="编辑" :visible.sync="editFormVisible" width="25%">
			<el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
                <el-input v-model="editForm.id" placeholder="" type="hidden"></el-input>
				<el-form-item label="应用名称"  prop="serviceName">
					<el-input v-model="editForm.serviceName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="应用IP" prop="serviceIp">
					<el-input v-model="editForm.serviceIp" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="editForm.type">
						<el-radio class="radio" label="prod">生产</el-radio>
                        <el-radio class="radio" label="dev">准生产</el-radio>
						<el-radio class="radio" label="test">测试</el-radio>
					</el-radio-group>
				</el-form-item>
                <el-form-item label="参数配置" prop="paramId">
                    <el-select v-model="editForm.paramId" filterable placeholder="请选择">
                        <el-option v-for="item in paramConfigs" :key="item.id" :label="item.bankCode+'-'+item.fmCode+'-'+item.type" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native.prevent="editSubmit" v-loading="editLoading">提交</el-button>
			</div>
		</el-dialog>

         <!--新增界面-->
		<el-dialog title="添加" :visible.sync="addFormVisible" width="40%">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="应用名称" prop="serviceName">
					<el-input v-model="addForm.serviceName" ></el-input>
				</el-form-item>
				<el-form-item label="应用IP" prop="serviceIp">
					<el-input v-model="addForm.serviceIp"></el-input>
				</el-form-item>
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="addForm.type">
						<el-radio class="radio" label="prod">生产</el-radio>
                        <el-radio class="radio" label="dev">准生产</el-radio>
						<el-radio class="radio" label="test">测试</el-radio>
					</el-radio-group>
				</el-form-item>
                <el-form-item label="参数配置" prop="paramId">
                    <el-select v-model="addForm.paramId" filterable placeholder="请选择">
                        <el-option v-for="item in paramConfigs" :key="item.id" :label="item.bankCode+'-'+item.fmCode+'-'+item.type" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native.prevent="addSubmit" v-loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
    </section>
</template>

<script>
import {getSysConfigList,delSysConfig,editSysConfig,addSysConfig,getParamConfigList} from '@/api/api';
import { valid } from 'semver';
export default {
    data() {
        return {
            searchKey:  '',
            editForm: {
					id: 0,
					serviceName: '',
					serviceIp: '',
					type: 'test'
            },
            addForm: {
                 serviceName: '',
                 serviceIp: '',
                 type:'',
                 paramId:0
            },
            addFormRules: {
                serviceName: [
                    {
                        required: true,
                        message:'请输入应用名称',
                        trigger: 'blur'
                    }
                ],
                type: [
                    {
                        required: true,
                        message: '请选择类型',
                        trigger: 'blur'

                    }
                ],
                paramId: [
                    {
                      required: true,
                        message: '请选择参数设置',
                        trigger: 'blur'  
                    }
                ]
            },
            editFormRules: {
					serviceName: [
						{ 
                            required: true,
                            message: '请输入应用名称', 
                            trigger: 'blur'
                        }
					]
            },
            paramConfigs:[],
            tableData: [],
            restaurants: [],
			total: 0,
            page: 1,
            listLoading: false,
            editFormVisible:false,
            editLoading: false,
            addFormVisible: false,
            addLoading: false
        }
    },
    methods :{
        handleCurrentChange(val) {
				this.page = val;
				this.getUsers();
        },
        handleDel: function(index,rowd){
            this.$confirm('确定要删除记录吗?','提示',{
                type:'warning'
            }).then(() => {
                this.listLoading=true;
                let para={
                    id:rowd.id
                }
               delSysConfig(para).then(data=>{
                   this.listLoading=false;
                  let {code,msg,retData}=data;
                  if(code!=200){
                      this.$message({
                          type: 'error',
                          message: msg
                      });
                  }else{
                      this.getUsers();
                  }
               });
            });
        },
        handleEdit :function(index,row){
            this.editFormVisible = true;
			this.editForm = Object.assign({}, row);
        },
        handleAdd :function(){
            this.addForm={};
            this.addFormVisible=true;
        },
        handleInfo :function(row){
             this.$router.push('/sysConfigDetail/'+row.id);
        },
        addSubmit: function(){
            this.$refs.addForm.validate((valid)=>{
                if(valid){
                    this.$confirm('确定提交吗?','提示',{}).then(() =>{
                        this.addLoading=true;
                        let para=Object.assign({},this.addForm);
                        addSysConfig(para).then(data=>{
                           this.addLoading=false;
                           let {code,msg,retData}=data;
                           if(code!=200){
                               this.$message({
                                   type:'error',
                                   message: msg
                               });
                           }else{
                               this.addFormVisible=false;
                               this.getUsers();
                           }
                        });
                    });
                }
            });
        },
        editSubmit: function(){
            this.$refs.editForm.validate((valid)=>{
                if(valid){
                   this.$confirm('确定要提交吗?','提示',{}).then(()=>{
                       this.editLoading=true;
                       let para=Object.assign({},this.editForm);
                       editSysConfig(para).then(data =>{
                           this.editLoading=false;
                           let {code,msg,retData}=data;
                             if(code!=200){
                                this.$message({
                                    type: 'error',
                                    message: msg
                                });
                             }else{
                                this.editFormVisible=false;
                                this.getUsers();
                             }
                       });
                   });
                }
            });
        },
        getUsers() {
            let para={
                pageCurrent: this.page,
                searchKey: this.searchKey
            }
            this.listLoading=true;
            getSysConfigList(para).then(res => {
                let {code,msg,retData}=res;
                this.listLoading=false;
                if(code==200){
                    this.total=retData.total;
                    this.tableData=retData.list;
                }else{
                    this.$message({
                        type: 'error',
                        message: msg
                    });
                }
            });
        },
        getParamConfigs() {
             getParamConfigList({}).then(res =>{
                    let {code,msg,retData}=res;
                    this.paramConfigs=retData;
             });

        }
 
    },
    mounted() {
       this.getUsers();
       this.getParamConfigs();
    }

}
</script>

